import { useState } from 'react';
import { Route, Routes, Link, useParams } from 'react-router-dom';
import { StrategyMenu } from '../components/Menu'
import ProfitChart from '../components/ProfitChart'
import CryptoTradeView from '../components/CryptoTradeView';
import strategies from '../assets/strategies.json';
import '../styles/StrategyPage.css'


function StrategyInfo({state}) {
    const { title } = useParams();

    return (
        <div className='strategy-info'>
            {state == 'profit' && <ProfitChart title={ title } />}
            {state == 'trade' && <CryptoTradeView title={ title } />}
        </div>
    );
}

function StrategyPage() {
    const { title } = useParams();
    const [state, setState] = useState('profit')

    return (
        <div>
            <StrategyMenu handleClick={setState} />
            <Routes>
                <Route path=":title" element={ <StrategyInfo state={state} /> } />
            </Routes>
        </div>
    );
}

export default StrategyPage;
